<template>
    <div>
        <input type="text" v-model="inputValue" @keyup.enter="setTodoalue" />
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useTodo, IUseTodo } from '@/hooks/index'
export default defineComponent({
    name: 'TodoInput',
    setup(_, { emit }) {
        const inputValue = ref<string>('')
        const { setTodo }: IUseTodo = useTodo()
        const setTodoalue = (e: KeyboardEvent): void => {
            inputValue.value.trim().length && emit('inputValue', inputValue)
            setTodo(inputValue.value)
            inputValue.value = ''
        }
        return { inputValue, setTodoalue }
    },
})
</script>

<style scoped>
</style>